w<template>
  <div class="content">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="微信订单号">
        <el-input v-model="formInline.transaction_id" placeholder="请输入微信订单号" clearable />
      </el-form-item>
      <el-form-item label="商户订单号">
        <el-input v-model="formInline.out_trade_no" placeholder="请输入商户订单号" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableParams.rows" stripe>
      <el-table-column type="index" />
      <el-table-column prop="payer_name" label="姓名" min-width="150" fixed="left" />
      <el-table-column prop="payer_phone" label="手机号码" min-width="150" />
      <el-table-column prop="payer_idCard" label="身份证号" min-width="200" />
      <el-table-column prop="payer_email" label="电子邮箱" min-width="250" />
      <el-table-column prop="status_format" label="支付状态" />
      <el-table-column prop="transaction_id" label="微信订单号" min-width="250" />
      <el-table-column prop="out_trade_no" label="商户订单号" min-width="250" />
      <el-table-column prop="submit_answer_time_format" label="提交答卷时间" min-width="150" />
      <el-table-column prop="amount" label="应结订单金额" min-width="120" />
      <el-table-column prop="pay_time" label="交易时间" min-width="180" />
      <el-table-column prop="transaction_status" label="交易状态" min-width="120" />
      <el-table-column label="开票状态" prop="_status" />
      <el-table-column label="操作" fixed="right" width="100" align="center">
        <template #default="scope">
          <el-button type="primary" text @click="handleClick(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="tableParams['total']" :total="tableParams['total']" v-model:page="formInline.pageIndex" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <el-dialog v-model="dialogVisible" title="订单详情" width="800" :before-close="handleClose">
      <el-descriptions title="问卷星信息">
        <el-descriptions-item label="姓名">{{ details.payer_name }}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ details.payer_phone }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ details.payer_idCard }}</el-descriptions-item>
        <el-descriptions-item label="电子邮箱">{{ details.payer_email }}</el-descriptions-item>
        <el-descriptions-item label="最高学历">{{ details.payer_educational }}</el-descriptions-item>
        <el-descriptions-item label="毕业专业">{{ details.payer_major }}</el-descriptions-item>
        <el-descriptions-item label="累计工作年限">{{ details.payer_work_year }}</el-descriptions-item>
        <el-descriptions-item label="所在企业">{{ details.payer_enterprise }}</el-descriptions-item>
        <el-descriptions-item label="所在企业税号">{{ details.payer_enterprise_taxNo }}</el-descriptions-item>
        <el-descriptions-item label="所在企业区属">{{ details.payer_enterprise_area }}</el-descriptions-item>
        <el-descriptions-item label="报名的培训分类">{{ details.training_type_1 }}</el-descriptions-item>
        <el-descriptions-item label="报名的《中级职称继续教育专业及地区">{{ details.training_type_2 }}</el-descriptions-item>
        <el-descriptions-item label="科目课程">{{ details.training_type_3 }}</el-descriptions-item>
        <el-descriptions-item label="科目课程">{{ details.training_type_4 }}</el-descriptions-item>
        <el-descriptions-item label="科目课程">{{ details.training_type_5 }}</el-descriptions-item>
        <el-descriptions-item label="报名的《职业技能等级证书">{{ details.occupation_type_1 }}</el-descriptions-item>
        <el-descriptions-item label="报名的职业工种与技能等级">{{ details.occupation_type_2 }}</el-descriptions-item>
        <el-descriptions-item label="报名的《职业技能竞赛》项目">{{ details.project }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="微信支付">
        <el-descriptions-item label="交易时间">{{ details.pay_time }}</el-descriptions-item>
        <el-descriptions-item label="微信订单号">{{ details.transaction_id }}</el-descriptions-item>
        <el-descriptions-item label="商户订单号">{{ details.out_trade_no }}</el-descriptions-item>
        <el-descriptions-item label="交易类型">{{ details.transaction_type }}</el-descriptions-item>
        <el-descriptions-item label="交易状态">{{ details.transaction_status }}</el-descriptions-item>
        <el-descriptions-item label="付款银行">{{ details.bank }}</el-descriptions-item>
        <el-descriptions-item label="货币种类">{{ details.currency_type }}</el-descriptions-item>
        <el-descriptions-item label="应结订单金额">{{ details.amount }}</el-descriptions-item>
        <el-descriptions-item label="微信退款单号">{{ details.wx_refund_trade_no }}</el-descriptions-item>
        <el-descriptions-item label="商户退款单号">{{ details.refund_trade_no }}</el-descriptions-item>
        <el-descriptions-item label="退款金额">{{ details.refund_amount }}</el-descriptions-item>
        <el-descriptions-item label="退款类型">{{ details.refund_type }}</el-descriptions-item>
        <el-descriptions-item label="退款状态">{{ details.refund_status }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="开票信息">
        <el-descriptions-item label="购买方名称">{{ details.gmfMc }}</el-descriptions-item>
        <el-descriptions-item label="购买方纳税人识别号">{{ details.gmfNsrsbh }}</el-descriptions-item>
        <el-descriptions-item label="购买方手机号">{{ details.gmfMobile }}</el-descriptions-item>
        <el-descriptions-item label="购买方邮箱">{{ details.gmfEmail }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ details.bz }}</el-descriptions-item>
        <el-descriptions-item label="课程名称">{{ details.detailParam[0].spmc }}</el-descriptions-item>
        <el-descriptions-item label="商品金额">{{ details.detailParam[0].je }}</el-descriptions-item>
        <el-descriptions-item label="税率">{{ details.detailParam[0].slv * 100 }}%</el-descriptions-item>
        <el-descriptions-item label="开票状态">{{ details._status }}</el-descriptions-item>
        <el-descriptions-item label="开票异常原因">{{ details.ycyy }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleClose">
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

const { proxy } = getCurrentInstance();

let formInline = ref({
  pageIndex: 1,
  pageSize: 10,
  transaction_id: "",
  out_trade_no: "",
});
let loading = ref(false);
let tableParams = ref({});
let details = ref({}); //详情
let dialogVisible = ref(false);

onMounted(() => {
  search();
});

let search = () => {
  formInline.value.pageIndex = 1;
  getInfo();
};

let init = () => {
  formInline.value = {
    pageIndex: 1,
    pageSize: 10,
    transaction_id: "",
    out_trade_no: "",
  };
  getInfo();
};
let getInfo = async () => {
  tableParams.value = await proxy.$apis.reportBill({
    type: "list",
    data: formInline.value,
  });
};
let handleClick = (e) => {
  details.value = e;
  dialogVisible.value = true;
};
let handleClose = () => {
  dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
</style>
